<script>
import debounce from '@/sheep/helper/debounce';
import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import sheep from '@/sheep';

export default {
  name: "first_popup",
  components: { UniPopup },
  data() {
    return {
      info: {
        title: '弹窗标题',
        maskClick: false,
        bottomContentWidth: '362rpx',
        isShowConfirm: true,
        showColseButton: true,
        showTitle: true,
        popupBackground: false,
        confirm: () => {
        }
      }
    }
  },
  computed: {
    IMG_URL() {
      return sheep.$store('AI').sq_image_path
    }
  },
  methods: {
    debounce,
    openPopup(obj) {
      console.log('获取到的obj=>', obj)
      this.info.title = obj.title
      this.info.maskClick = obj.maskClick
      this.info.confirm = obj.confirm
      this.info.bottomContentWidth = !!obj.bottomContentWidth ? obj.bottomContentWidth : '362rpx'
      if (obj.isShowConfirm === false) {
        this.info.isShowConfirm = false
      }
      if (obj.showColseButton === false) {
        this.info.showColseButton = false
      }
      if (obj.showTitle === false) {
        this.info.showTitle = false
      }
      if (obj.popupBackground === true) {
        this.info.popupBackground = true
      }
      this.$refs.popup.open()
    },
    confirm(){
      this.info.confirm()
    },
    closePopup() {
      this.$refs.popup.close()
      this.$emit('closePopup')
    }
  },
}
</script>

<template>
  <uni-popup ref="popup" :maskClick="info.maskClick" :maskBackgroundColor="'rgba(0,0,0,0.6)'">
    <view class="first_popup flex flex-column align-center">
      <image class="first_popup_image" v-if="info.popupBackground" :src="`${IMG_URL}/index/personalInformation.png`"
             mode="widthFix"></image>
      <view class="first_popup_header flex align-center justify-center" v-if="info.showTitle">
        <text class="first_popup_header_text">{{ info.title }}</text>
      </view>
      <image class="first_popup_header_image z_20" :src="`${IMG_URL}/index/popupClose.png`" mode="widthFix"
             v-if="info.showColseButton"
             @click="closePopup"></image>
      <slot></slot>

      <view class="flex align-center justify-between z_10">
        <slot name="bottomContent"></slot>
        <view class="first_popup_bottom flex align-center justify-center mt_48 mb_120" :style="{
        width:info.bottomContentWidth
        }" @click="debounce(confirm,500,true)" v-if="info.isShowConfirm">
          <text class="first_popup_bottom_text">确定</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.first_popup {
  width: 613rpx;
  background: #FFFFFF;
  border-radius: 43rpx 43rpx 43rpx 43rpx;
  border: 2rpx solid #707070;
  //overflow: hidden;
  position: relative;

  .first_popup_image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 613rpx;
    border-radius: 43rpx 43rpx 0 0;
  }

  .first_popup_header {
    width: 100%;
    height: 93rpx;
    background: #FFFFFF;
    border-radius: 43rpx 43rpx 0rpx 0rpx;
    //border: 1rpx solid #707070;
    position: relative;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #292929;
    }


  }

  .first_popup_header_image {
    width: 62rpx;
    position: absolute;
    right: -10rpx;
    top: 20rpx;
    transform: translateY(-50%);
  }

  .first_popup_bottom {
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>